<template>
  <div>
    <en-table-layout
      :table-data="tableData.data"
      :loading="loading"
      :tips="true"
    >
      <div slot="tips">
        <h4>操作提示</h4>
        <ul>
          <li style="margin-bottom: 10px;">敏感词展示时会替换为` * `号，例：设置` 测试 `为敏感词，即` 测试商品 `将展示为` **商品 `。</li>
          <li style="margin-bottom: 10px;">系统默认自带一万多词汇，自带词汇界面不展示，不能直接维护，可以在代码中删除。</li>
          <li>目前仅对用户名、商品名称、咨询内容、评论内容进行过滤；新增或编辑敏感词时不会对已有的内容进行过滤。</li>
        </ul>
      </div>
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAddSensitiveWords">添加</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search @search="searchEvent" placeholder="请输入敏感词"/>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column prop="word_name" label="敏感词"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleSensitiveWords(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <el-pagination
        v-if="tableData"
        slot="pagination"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="tableData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tableData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.data_total">
      </el-pagination>
    </en-table-layout>
    <el-dialog
      title="添加敏感词"
      :visible.sync="dialogsensitiveWords"
      width="500px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="sensitiveWordsForm" :rules="sensitiveWordsRules" ref="sensitiveWordsForm" size="small" label-width="120px">
        <el-form-item label="敏感词名称" prop="word_name">
          <el-input v-model="sensitiveWordsForm.word_name"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogsensitiveWords = false">关 闭</el-button>
        <el-button type="primary" @click="submitSensitiveWords">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import * as API_sensitiveWords from '@/api/sensitiveWords'
    export default {
      name: 'sensitiveWords',
      data() {
        return {
          /** 列表loading状态 */
          loading: false,
          /** 列表数据 */
          tableData: '',
          /** 列表参数 */
          params: {
            page_no: 1,
            page_size: 10
          },

          /** 添加敏感词  dialog*/
          dialogsensitiveWords: false,

          /** 添加敏感词表单*/
          sensitiveWordsForm: {},

          /** 添加敏感词表单*/
          sensitiveWordsRules: {
            word_name: [
              this.MixinRequired('请输入敏感词名称！'),
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      mounted() {
        this.GET_SensitiveWordsList()
      },
      methods: {
        /** 分页大小发生改变 */
        handlePageSizeChange(size) {
          this.params.page_size = size
          this.GET_SensitiveWordsList()
        },

        /** 分页页数发生改变 */
        handlePageCurrentChange(page) {
          this.params.page_no = page
          this.GET_SensitiveWordsList()
        },

        /** 添加敏感词 */
        handleAddSensitiveWords() {
          this.dialogsensitiveWords = true
        },

        /** 搜索事件触发 */
        searchEvent(data) {
          this.params.page_no = 1
          this.params.keyword = data
          if (!data) delete this.params.keyword
          this.GET_SensitiveWordsList()
        },

        /** 添加敏感词 表单提交 */
        submitSensitiveWords() {
          this.$refs['sensitiveWordsForm'].validate((valid) => {
            if (valid) {
              API_sensitiveWords.addSensitiveWords(this.sensitiveWordsForm).then(() => {
                this.dialogsensitiveWords = false
                this.$message.success('保存成功！')
                this.GET_SensitiveWordsList()
              })
            } else {
              this.$message.error('表单填写有误，请检查！')
              return false
            }
          })
        },

        /** 删除敏感词 */
        handleDeleSensitiveWords(index, row) {
          API_sensitiveWords.deleSensitiveWords(row.id).then(() => {
            this.$message.success('删除成功！')
            this.GET_SensitiveWordsList()
          })
        },

        /** 获取敏感词列表 */
        GET_SensitiveWordsList() {
          this.loading = true
          API_sensitiveWords.getSensitiveWordsList(this.params).then(response => {
            this.loading = false
            this.tableData = response
          }).catch(() => {
            this.loading = false
          })
        }
      }
    }
</script>

<style scoped>

</style>
